<template>
    <div>
        <el-table :data="store.getters['menu/getMenu']" border style="width: 100%"
        :tree-props="{ children: 'children' }" row-key="id">
            <el-table-column prop="id" label="菜单编号" width="180" />
            <el-table-column prop="title" label="菜单名称"  width="180"/>
            <el-table-column prop="pid" label="上级菜单" />
            <el-table-column label="菜单图标" >
                <template v-slot="item">
                    <div>
                        <el-icon v-if="item.row.icon">
                            <!-- 动态组件component -->
                            <component :is="item.row.icon"></component>
                        </el-icon>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="url" label="菜单地址"  />
            <el-table-column  label="状态" width="180">
                <template v-slot="item">
                    <div>
                        <el-button v-if="item.row.status==1"  type="primary" plain>启用</el-button>
                        <el-button v-else type="danger" plain>禁用</el-button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column  label="操作"  width="180">
             <template v-slot="item">
                <div>
                    <el-button type="primary" @click="edit(item.row.id)">编辑</el-button>
                <el-button type="danger" @click="del(item.row.id)">删除</el-button>
                </div>
             </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script lang='ts' setup>
// 引入删除列表
import {menuDelete} from '@/request/api'
import {ElMessageBox,ElMessage} from 'element-plus'
import {defineEmits} from 'vue'
let emit=defineEmits(['edit'])
// 引入vuex
// import {menuList} from '@/request/api'
import {useStore} from 'vuex'
let store=useStore()

// 获取vuex的menu列表
const getMenu=()=>{
    // console.log(store); 
    store.dispatch('menu/getMenuAction')
}
console.log(store.dispatch('menu/getMenuAction'));

// 页面打开调取列表
getMenu()
// 编辑事件
const edit=(id:number)=>{
    emit('edit',id)
}

// 删除
const del=(id:number)=>{
    ElMessageBox.confirm('你确定要删除吗？','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
    }).then(()=>{
        menuDelete({id}).then(res=>{
        if(res.code==200){
            ElMessage.success(res.msg)
            // 重新调用列表
            getMenu()
        }
    })
    }).catch(()=>{
        ElMessage({
            type:'info',
            message:'已取消'
        })
    })
}
</script>
<style scoped></style>